<!--
 * @Author: 张贤石 “阿册011432181@163.com”
 * @Date: 2022-08-12 22:28:38
 * @LastEditors: 张贤石 “阿册011432181@163.com”
 * @LastEditTime: 2022-08-14 13:59:34
 * @FilePath: \mall-management\src\views\sms\flash.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<!-- 营销第一页 -->

<template>
<!-- 顶部 -->
  <div class="crumb">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="#">权限</a></el-breadcrumb-item>
      <el-breadcrumb-item>{{ name }}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <!-- 顶部结束 -->

  <!-- 筛选开始 -->
  <div class="search">
    <!-- :model="ruleForm" :rules="rules" -->
        <el-form ref="ruleFormRef"  label-width="120px" class="demo-ruleForm"
            size="default" status-icon>
            <header>
                <div class="left">
                    <el-icon style="vertical-align: middle">
                        <Search />
                    </el-icon>
                    <span>筛选搜索</span>
                </div>
                <div>
                    <!-- @click="resetForm(ruleFormRef)" -->
                    <el-button >重置</el-button>
                    <!-- @click="submitForm(ruleFormRef)" -->
                    <el-button type="primary" >重新搜索</el-button>
                </div>
            </header>
            <section>
                <div style="width: 300px;">
                    <el-form-item label="活动名称" prop="name">
                        <!--  v-model="ruleForm.name"-->
                        <el-input  placeholder="活动名称" />
                    </el-form-item>
                </div>
                

            </section>

        </el-form>
    </div>
  <!-- 筛选结束 -->
  <!--数据列表 -->
      <div class="search1">
        <header>
            <div class="left">
                <el-icon style="vertical-align: middle">
                    <Tickets />
                </el-icon>
                <span>数据列表</span>
            </div>
            <div>
                <!--  @click="add()" -->
                <el-button type="primary">添加</el-button>
                <el-button type="primary">秒杀时间段</el-button>
            </div>
        </header>
    </div>
  <!-- 数据列表结束 -->
  <!-- 表格开始 -->
  <el-table :data="TableList" style="width: 98%;margin:auto" border :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ textAlign: 'center' }">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="id" label="编号" width="60" align="center" />
            <el-table-column prop="title" label="活动标题" />
            <el-table-column prop="status" label="活动状态" />
            <el-table-column prop="startDate" label="开始时间" />
            <el-table-column prop="endDate" label="结束时间">
                <template #default="scope">
                    <!-- {{ formatDate(scope.row.createTime) }} -->
                </template>
            </el-table-column>
            <!-- <el-table-column label="最后登录">
                <template #default="{ row }">
                    {{ formatDate(row.loginTime) }}
                </template>
            </el-table-column> -->
            <el-table-column label="是否启用">
                <template #default="{ row }">
                <!-- @change="changeStatus(row.id, row.status)" -->
                    <el-switch v-model="row.status" :active-value="1" :inactive-value="0"
                         />
                </template>
            </el-table-column>
            <el-table-column label="操作" width="130">
                <template #default="{ row }">
                <!-- @click="handleClick" -->
                    <el-button link type="primary" size="small" >分配角色</el-button>
                    <!-- @click="edit(row)" -->
                    <el-button link type="primary" size="small" >编辑</el-button>
                      <el-button link type="primary" size="small" >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
  <!-- 表格结束 -->
  <!-- 表格下方小表格 -->
   <el-pagination v-model:currentPage="pageination.currentPage" v-model:page-size="pageination.pageSize"
            :page-sizes="[5, 10, 20, 30, 40]" :small="pageination.small" :disabled="pageination.disabled"
            :background="pageination.background" layout="total, sizes, prev, pager, next, jumper"
            :total="pageination.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</template>

<script setup lang="ts">
// 顶部
import { useUserStore } from "@/store/modules/user"
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
// 筛选
import { Search } from '@element-plus/icons-vue'
// import { Search } from '@element-plus/icons-vue'
import { reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import * as http from '@/request/api'
import { useTable } from "@/hooks/components/useTable";
import { Tickets } from '@element-plus/icons-vue'




// 顶部
const useState = useUserStore()
const route = useRoute()
const name = ref('')
onMounted(() => useState.menus.forEach(item => {
  if (route.name == item.name) {
    name.value = item.title
    }
    }))
//   顶部结束
// 筛选
// const emit = defineEmits(['seachKey'])
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    name: '',
})
// const rules = reactive<FormRules>({
//     name: [
//         { validator: checkPwd, message: '请输入账号/姓名', trigger: 'blur' },
//     ],
// })
// const submitForm = async (formEl: FormInstance | undefined) => {
//     if (!formEl) return
//     await formEl.validate((valid, fields) => {
//         if (valid) {
//             emit('seachKey', ruleForm.name)
//         } else {
//             console.log('error submit!', fields)
//         }
//     })
// }
// function checkPwd(
//     rule: unknown,
//     value: string | undefined,
//     cb: (msg?: string) => void,
// ) {
//     if (!value) {
//         return cb('密码不能为空');
//     } else {
//         return cb();
//     }
// }
// const resetForm = (formEl: FormInstance | undefined) => {

//     if (!formEl) return;
//     formEl.resetFields()
//     emit('seachKey', ruleForm.name)
// }
// 筛选结束

// 表格
// 表格请求的数据
const keyword = ref('');
let { TableList,
    pageination,
    handleSizeChange,
    handleCurrentChange
} = useTable(http.flash.flashlistApi, { keyword: keyword.value })
  console.log("活动接口",TableList);
  



</script>

<style lang="less" scoped>
// 顶部
.crumb {
  padding: 15px 20px;
  height: 30px;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  position: fixed;
  z-index: 999;
  top: 70px;
  width: 100%;
}

// 筛选
.search {
    padding: 20px;
    box-shadow: 0 0 20px #ccc;
    width: 95%;
    margin:100px auto 0;
    header {
        display: flex;
        justify-content: space-between;

        .left span {
            padding-left: 15px;
        }
    }

}
// 数据列表

.search1 {
    width: 95%;
    margin: 30px auto;
    padding: 20px;
    box-shadow: 0 0 20px #ccc;
    
    header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left span {
            padding-left: 15px;
        }
    }

    section {
        padding: 20px 0 10px;
    }
}
// 表格
.content {
    padding: 20px 15px;
    margin-top: 60px;
}

.el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-light-9);
}

th {
    font-weight: bold;
}
</style>
